<template>
  <div id="manager">
    <div id="map-container">
      <BaiduMap :api-key="apiKey" :center="mapCenter" :zoom="mapZoom":markers="taskArray" />
    </div>
  </div>
</template>

<script>
import BaiduMap from './BaiduMap.vue'

export default {
  name: 'Manager',
  components: { BaiduMap },
  data() {
    return {
      apiKey: 'KRTLy2aLuHV7H3CNz3GFIFoythfsb9iB',
      mapCenter: { lng: -74.002, lat: 40.424 },
      mapZoom: 11,
      taskArray: []
    }
  },
  mounted() {
    const fourHours = 4 * 60 * 60 * 1000
    this.updateData()
    window.timer = setInterval(() => {
      setTimeout(() => {
        this.updateData()
      }, 0)
    }, fourHours)
  },
  methods: {
    goBack() {
      var myHeaders = new Headers()
      myHeaders.append('User-Agent', 'Apifox/1.0.0 (https://apifox.com)')
      myHeaders.append('Authorization', 'Bearer ' + sessionStorage.getItem('token'))
      var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
      }

      fetch('http://1.92.204.101:5000/task/get_task_statement', requestOptions)
        .then(response => response.text())
        .then(result => {
          var data = JSON.parse(result)
          console.log(data[0])
          for (var i = 0; i < data.length; i++) {
            var da = data[i]
            this.taskArray.push([da.placex, da.placey])
          }
        })
        .catch(error => console.log('error', error))
    },
    updateData() {
      this.taskArray.length = 0
      var myHeaders = new Headers()
      myHeaders.append('User-Agent', 'Apifox/1.0.0 (https://apifox.com)')
      myHeaders.append('Authorization', 'Bearer ' + sessionStorage.getItem('token'))
      var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        redirect: 'follow'
      }

      fetch('http://1.92.204.101:5000/task/get_task_statement', requestOptions)
        .then(response => response.text())
        .then(result => {
          var data = JSON.parse(result)
          console.log(data[0])
          for (var i = 0; i < data.length; i++) {
            var da = data[i]
            this.taskArray.push([da.placex, da.placey])
          }
        })
        .catch(error => console.log('error', error))
    }
  }
}
</script>

<style lang="scss" scoped>
.documentation-container {
  margin: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .document-btn {
    flex-shrink: 0;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    padding: 0 16px;
    margin: 16px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }

  .map-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;
  }
}
</style>
